<template>
   <div class="cartControll">
        <span @click.stop="decreaseCount" class="jian" v-if="food.count>0">
            <i>-</i>
        </span>
        <span class="cartcount" v-if="food.count>0">{{food.count}}</span>
        <span class="jia" @click.stop="increaseCount">
            <i>+</i>
        </span>
   </div>
</template>

<script>
    export default {
        name: 'cartControll',
        props: {
            food: Object
        },
        methods: {
            decreaseCount() {
                this.food.count--;
            },
            increaseCount() {
                this.food.count++;
                console.log(this.food.count);
            },
        }
    }
</script>

<style scoped>
    .jian,
    .jia,
    .cartcount {
        display: inline-flex;
        width: 1.5rem;
        height: 1.5rem;
        justify-content: center;
        align-items: center;
        border-radius: 50%;
    }
    
    .jia {
        color: #ffffff;
        background-color: #55A1E8;
        font-size: 1.4rem;
    }
    
    .jian {
        background-color: #FFFFFF;
        color: #494f53;
        border: 1px solid #55A1E8;
        font-size: 1.4rem;
    }
    
    .jian i {
        color: #55A1E8;
    }
    
    .cartcontroll {
        display: inline-flex;
        align-items: center;
    }
    
    .cartbutton {
        display: inline-block;
        vertical-align: middle;
    }
    
    .cartbutton i {
        color: rgb(35, 149, 255);
        vertical-align: middle;
        font-size: 1.5rem;
    }
    
    .button-minus {
        width: 4.866667vw;
        height: 4.866667vw;
        border: 1px solid rgb(35, 149, 255);
        border-radius: 50%;
        text-align: center;
    }
    
    .button-minus i {
        font-size: 1rem;
    }
    
    .cartcount {
        display: inline-block;
        text-align: center;
        color: rgba(0, 0, 0, 0.87);
        vertical-align: middle;
        font-size: 0.8rem;
        width: 6.933333vw;
        overflow: hidden;
    }
</style>